import { ref } from 'vue'
import { defineStore } from 'pinia'

export const settingMode = defineStore('settingMode', () => {
  const collapse = ref(false);
  const themeStatus = ref(localStorage.getItem('theme') || 'light') // 'light' 改为 'dark' 即可更改默认风格
  const screenWidth = ref(window.innerWidth)

  const changeCollapse = () => {
    collapse.value = !collapse.value
  }

  const changeTheme = () => {
    const theme = localStorage.getItem('theme')
    theme === 'light' ? localStorage.setItem('theme', 'dark') : localStorage.setItem('theme', 'light')
    themeStatus.value = theme === 'light' ? 'dark' : 'light'
  }
  const handleResize = (width: number) => {
    screenWidth.value = width
  }
  const initTheme = () => {
    let html = document.documentElement

    themeStatus.value == 'dark' ? html.classList.add('dark') : html.classList.remove('dark')
  }

  return { collapse, changeCollapse, themeStatus, changeTheme, initTheme, screenWidth, handleResize }
})
